<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-13 14:15:33
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-10-21 18:00:57
 * @FilePath: \hy-ui\src\views\taskMassage\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="taskMain">
    <el-card class="box-card">
      <div class="taskContent">
        <div style="height:54px"></div>
        <div class="clearfix">
          <span class="logoTitle">任务中心</span>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="任务" name="1"></el-tab-pane>
            <el-tab-pane label="日程" name="2"></el-tab-pane>
            <el-tab-pane label="项目" name="3" ></el-tab-pane>
            <el-tab-pane label="统计" name="4"></el-tab-pane>
            <!-- <el-tab-pane label="管理" name="5" disabled></el-tab-pane> -->
          </el-tabs>
        </div>
        <div class="cntMain">
          <Task v-if="activeName === '1'" />
          <Schedule v-if="activeName === '2'" />
          <Project v-if="activeName === '3'" ref="project"/>
          <Statistics v-if="activeName === '4'"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Task from "@/views/taskMassage/components/task";
import Schedule from "@/views/taskMassage/components/schedule";
import Project from "@/views/taskMassage/components/project";
import Statistics from "@/views/taskMassage/components/statistics";
export default {
  components: {
    Task,
    Schedule,
    Project,
    Statistics
  },
  methods: {
    handleClick(val) {
    if(val._props.name === '3') {
      this.$nextTick(()=>{
        this.$refs.project.setIsTask()
      })
    }
    },
  },
  data() {
    return {
      activeName: "1",
    };
  },
};
</script>

<style lang="scss" scoped>
.taskMain {
    ::v-deep .el-card__header {
  padding: 7px 15px;
}
::v-deep .el-card__body {
  padding: 0 ;
}
}

.logoTitle {
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  line-height: 39px;
  margin-left: 30px;
  z-index: 1001;
}

.taskContent {
  display: flex;
  flex-direction: column;

.clearfix {
  position: fixed;
  padding: 7px 15px;
  border-bottom: 1px solid #e6ebf5;
  width: 100%;
  background: #fff;
  z-index: 5;
  ::v-deep .el-tabs__header {
  width: 60%;
  margin: 0 auto;
}
::v-deep .el-tabs__item {
  width: 20%;
  text-align: center;
  font-size: 16px;
  padding: 0 20px;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}
::v-deep .el-tabs__nav {
  width: 100%;
}
}
}
</style>